<template>
  <div class="month-detail-wrapper">
    <div class="wrapper_bread">
      <router-link to="/home"
        >首页<span class="bread-icon"> > </span></router-link
      >
      <router-link to="/household"
        >家庭保洁<span class="bread-icon"> > </span></router-link
      >
      <span class="bread-current">日常保洁</span>
    </div>
    <div class="content">
      <div class="content_item first">
        <div class="item-img">
          <img
            src="https://ccdn.goodq.top/caches/2729acc48f69194563f94b87d1ea86c4/aHR0cDovLzViYzZlZDU5MWU3NDMudDczLnFpZmVpeWUuY29tL3FmeS1jb250ZW50L3VwbG9hZHMvMjAxOC8xMC9mMGYxNjRmMTg2Mjc5MmYyOTY4NDdkZjEyZGY0YWExMC00MDB4NDAwLTkwLndlYnA_p_p100_p_3D.webp"
            alt=""
          />
        </div>
        <div class="item-info">
          <div class="info-name">
            <span class="username">朱阿姨</span>
            <span>二星月嫂</span>
          </div>
          <div class="info-desc">属牛 | 3年以上服务经验 | 服务超过20户</div>
          <div class="info-price">
            <div class="price">价格：26天/ <span class="num">9900元</span></div>
            <div class="label">
              经验丰富 | 态度诚恳 | 热情直爽 | 做事主动 | 独立思考
            </div>
          </div>
        </div>
        <div class="item-phone">
          <div class="id">阿姨ID：12321</div>
          <div class="btn"><el-button type="danger">预约面试</el-button></div>
          <div class="wrapper_contact">
            <div class="contact-phone">
              <p class="phone-name">电话咨询：</p>
              <p class="phone-num">400-0000-0000</p>
            </div>
          </div>
        </div>
      </div>
      <div class="content_item second">
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="基本资料" name="first">
            <div class="base">
              <div class="base-item">
                <div class="item">身份证号：345220188503247152</div>
                <div class="item">学历：初中</div>
              </div>
              <div class="base-item">
                <div class="item">服务类别：月嫂</div>
                <div class="item">籍贯：河北</div>
              </div>
              <div class="base-item">
                <div class="item">服务城市：苏州</div>
                <div class="item">婚育状态：已婚已育</div>
              </div>
              <div class="base-item">
                <div class="item">出生日期：03/24/1985</div>
                <div class="item">
                  已有证件：身份证 健康证 母婴护理证 催乳师证
                </div>
              </div>
              <div class="base-item">
                <div class="item">星座：白羊座</div>
                <div class="item">
                  综合评论：经验丰富、态度诚恳、热情直爽、做事主动
                </div>
              </div>
            </div>
          </el-tab-pane>
          <el-tab-pane label="照片" name="second" class="second-img">
            <div class="photo">
              <img
                src="https://ccdn.goodq.top/caches/2729acc48f69194563f94b87d1ea86c4/aHR0cDovLzViYzZlZDU5MWU3NDMudDczLnFpZmVpeWUuY29tL3FmeS1jb250ZW50L3VwbG9hZHMvMjAxOC8xMC81ZGM2MDhlYjViZWMwOGE2MzI0YmU4NzA0MmFlNDAzOS0zMzJ4MjIwLTkwLndlYnA_p_p100_p_3D.webp"
                alt=""
              />
              <img
                src="https://ccdn.goodq.top/caches/2729acc48f69194563f94b87d1ea86c4/aHR0cDovLzViYzZlZDU5MWU3NDMudDczLnFpZmVpeWUuY29tL3FmeS1jb250ZW50L3VwbG9hZHMvMjAxOC8xMC81ZGM2MDhlYjViZWMwOGE2MzI0YmU4NzA0MmFlNDAzOS0zMzJ4MjIwLTkwLndlYnA_p_p100_p_3D.webp"
                alt=""
              />
              <img
                src="https://ccdn.goodq.top/caches/2729acc48f69194563f94b87d1ea86c4/aHR0cDovLzViYzZlZDU5MWU3NDMudDczLnFpZmVpeWUuY29tL3FmeS1jb250ZW50L3VwbG9hZHMvMjAxOC8xMC81ZGM2MDhlYjViZWMwOGE2MzI0YmU4NzA0MmFlNDAzOS0zMzJ4MjIwLTkwLndlYnA_p_p100_p_3D.webp"
                alt=""
              />
              <img
                src="https://ccdn.goodq.top/caches/2729acc48f69194563f94b87d1ea86c4/aHR0cDovLzViYzZlZDU5MWU3NDMudDczLnFpZmVpeWUuY29tL3FmeS1jb250ZW50L3VwbG9hZHMvMjAxOC8xMC81ZGM2MDhlYjViZWMwOGE2MzI0YmU4NzA0MmFlNDAzOS0zMzJ4MjIwLTkwLndlYnA_p_p100_p_3D.webp"
                alt=""
              />
            </div>
          </el-tab-pane>
          <el-tab-pane label="掌握技能" name="third">
            <div class="skill">
              <img
                src="https://ccdn.goodq.top/caches/2729acc48f69194563f94b87d1ea86c4/aHR0cDovLzViYzZlZDU5MWU3NDMudDczLnFpZmVpeWUuY29tL3FmeS1jb250ZW50L3VwbG9hZHMvMjAxOC8xMC82ZmU0YWM5YTgwZWNmMzI3M2YyYTk0YzkzOWVkMWVmYi0yNjd4MzQ5LTkwLndlYnA_p_p100_p_3D.webp"
                alt=""
              />
              <img
                src="https://ccdn.goodq.top/caches/2729acc48f69194563f94b87d1ea86c4/aHR0cDovLzViYzZlZDU5MWU3NDMudDczLnFpZmVpeWUuY29tL3FmeS1jb250ZW50L3VwbG9hZHMvMjAxOC8xMC9kNzFhMzU4NzdkNTE2MDk5ZDg0Mzc3ZjU5YjY1NWMxYi0yNjd4MzQ5LTkwLndlYnA_p_p100_p_3D.webp"
                alt=""
              />
              <img
                src="https://ccdn.goodq.top/caches/2729acc48f69194563f94b87d1ea86c4/aHR0cDovLzViYzZlZDU5MWU3NDMudDczLnFpZmVpeWUuY29tL3FmeS1jb250ZW50L3VwbG9hZHMvMjAxOC8xMC8xMGVmZTJmMzVmOWIzOTQwOGU1Nzg1ODc2MTk0ZmFlZC0yNjd4MzQ5LTkwLndlYnA_p_p100_p_3D.webp"
                alt=""
              />
              <img
                src="https://ccdn.goodq.top/caches/2729acc48f69194563f94b87d1ea86c4/aHR0cDovLzViYzZlZDU5MWU3NDMudDczLnFpZmVpeWUuY29tL3FmeS1jb250ZW50L3VwbG9hZHMvMjAxOC8xMC8xNDBkOGFjM2NiZGNmNjg2ZjBkZGEyNzM4NTNiYWEwZi0yNjd4MzQ5LTkwLndlYnA_p_p100_p_3D.webp"
                alt=""
              />
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
      <div class="content_item third">
        <div class="comment">
          <div class="header">
            <div class="title">
              <i class="el-icon-date"></i>
              <span>用户评论</span>
            </div>
          </div>
          <div class="content">登录后即可发表评论，立即登录.</div>
        </div>
      </div>
      <div class="content_item fourth">
        <div class="skills-certificate">
          <div class="header">
            <div class="title">
              <i class="el-icon-date"></i>
              <span>技能认证</span>
            </div>
          </div>
          <div class="content">
            <ul>
              <li>
                公司通过基础分、经验分、技能分三个维度的评估，对月嫂进行全方位的评估，最终得出认证级别。
              </li>
              <li>
                基础分总分100分，考核内容包括：背景经历、仪容仪表、沟通能力、心理素质，背景调查等；
              </li>
              <li>
                经验分总分100分，考核内容包括：上户数、上户时长、从业年限、各项技能证书，上户时长不够、从业年限不够不能升级，等级越高月嫂经验越丰富，技能越完
              </li>
              <li>
                技能分总分400分，考核内容包括：新生儿护理及产妇护理、月子餐、早教等，仅技能考核一项长达120分钟，分为理论考核和实操考核，理论考核保证所有的月嫂有科学的育儿意识，实操考核着重于熟练的操作手法。
              </li>
              <li>
                月嫂等级只取三项考核中的最低等级，例如基础分达到4星，经验分达到2星，技能分达到5星，最后这个月嫂的定级为：3星。
              </li>
            </ul>
          </div>
        </div>
      </div>
      <div class="content_item"></div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeName: "first",
    };
  },
  methods: {
    handleClick() {},
  },
};
</script>

<style lang="scss" scoped>
.month-detail-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  .wrapper_bread {
    color: #666;
    line-height: 60px;
    width: 1280px;
    .bread-icon,
    .bread-current {
      color: #e6454a;
    }
  }
  .content {
    &_item {
      display: flex;
      width: 1280px;
      //   height: 300px;
      background-color: #fff;
      margin-bottom: 40px;
      .item-img {
        img {
          width: 300px;
          height: 300px;
        }
      }
      .item-info {
        flex: 5;
        padding: 8px 40px;
        .info-name {
          line-height: 60px;
          color: #e6454a;
          .username {
            font-size: 28px;
            margin-right: 20px;
            color: #333;
          }
        }
        .info-desc {
          font-size: 14px;
          line-height: 30px;
          color: #999;
          margin-bottom: 10px;
        }
        .info-price {
          background-color: #f9f9f9;
          height: 150px;
          padding: 10px 30px;
          box-sizing: border-box;
          .price {
            line-height: 50px;
            margin-top: 20px;
            font-size: 16px;
            color: #666666;
            .num {
              font-size: 30px;
              color: #e6454a;
            }
          }
          .label {
            line-height: 30px;
            font-size: 15px;
            color: #999;
          }
        }
      }
      .item-phone {
        flex: 2;
        display: flex;
        flex-direction: column;
        align-items: center;
        // padding: 30px 0;
        .id {
          font-size: 16px;
          color: #666666;
          margin-top: 40px;
        }
        .btn {
          margin-top: 40px;
          /deep/ .el-button {
            width: 220px;
            height: 52px;
          }
        }
        .wrapper_contact {
          width: 220px;
          height: 75px;
          background-color: #fff;
          padding: 20px;
          //   box-sizing: border-box;
          border-radius: 6px;
          .contact-phone {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 100%;
            border: 3px solid #e6454a;
            .phone-name {
              color: #e6454a;
              line-height: 30px;
            }
            .phone-num {
              font-size: 20px;
              color: rgb(230, 69, 74);
            }
          }
        }
      }
    }
    .first {
      height: 300px;
    }
    .second {
      box-sizing: border-box;
      padding: 30px;
      width: 100%;
      /deep/ .el-tabs__item {
        font-size: 18px;
        height: 40px;
      }
      /deep/ .el-tabs__item.is-active {
        color: #e6454a;
      }
      /deep/ .el-tabs__item:hover {
        color: #e6454a;
      }
      /deep/ .el-tabs__active-bar {
        background-color: #e6454a;
      }
      .base-item {
        display: flex;
        justify-content: space-between;
        width: 100%;
        line-height: 40px;
        color: #666;
        .item {
          //   flex: 1;
          width: 610px;
        }
      }
      .photo,
      .skill {
        display: flex;
        justify-content: space-between;
        width: 1220px;
        img {
          width: 24%;
        }
      }
    }

    .third,
    .fourth {
      padding: 30px;
      .comment,
      .skills-certificate {
        .header {
          width: 1220px;
          border-bottom: 1px solid #e4e7ed;
          .title {
            text-align: center;
            font-size: 18px;
            width: 100px;
            border-bottom: 3px solid #e6454a;
            line-height: 30px;
          }
        }
        .content {
          padding: 30px 0;
          ul {
            li {
              margin-left: 30px;
              font-size: 14px;
              line-height: 30px;
              color: #666666;
              list-style: disc;
            }
          }
        }
      }
    }
  }
}
</style>

